<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自动生成图标 - 立即修复</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .container {
      background: white;
      padding: 40px;
      border-radius: 16px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      max-width: 600px;
      width: 100%;
      text-align: center;
    }
    h1 {
      color: #333;
      margin-bottom: 20px;
      font-size: 28px;
    }
    .status {
      padding: 20px;
      background: #f5f5f5;
      border-radius: 8px;
      margin: 20px 0;
      min-height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .status.success {
      background: #c8e6c9;
      color: #2e7d32;
    }
    .status.error {
      background: #ffcdd2;
      color: #c62828;
    }
    .icon-preview {
      display: flex;
      gap: 20px;
      justify-content: center;
      margin: 30px 0;
      flex-wrap: wrap;
    }
    .icon-item {
      text-align: center;
    }
    .icon-item canvas {
      border: 2px solid #ddd;
      border-radius: 8px;
      margin-bottom: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .icon-item label {
      display: block;
      font-size: 14px;
      color: #666;
      font-weight: 500;
    }
    button {
      background: #667eea;
      color: white;
      border: none;
      padding: 14px 28px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      margin: 10px 5px;
      transition: all 0.3s;
      font-family: inherit;
    }
    button:hover {
      background: #5568d3;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }
    button:disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: none;
    }
    .instructions {
      background: #e3f2fd;
      padding: 20px;
      border-radius: 8px;
      margin-top: 20px;
      text-align: left;
      line-height: 1.8;
    }
    .instructions h3 {
      margin-bottom: 10px;
      color: #1976d2;
    }
    .instructions ol {
      margin-left: 20px;
    }
    .instructions li {
      margin: 8px 0;
    }
    .instructions code {
      background: rgba(0,0,0,0.1);
      padding: 2px 6px;
      border-radius: 4px;
      font-family: 'Courier New', monospace;
    }
    .progress {
      display: none;
      margin: 20px 0;
    }
    .progress.show {
      display: block;
    }
    .progress-bar {
      width: 100%;
      height: 8px;
      background: #e0e0e0;
      border-radius: 4px;
      overflow: hidden;
      margin-top: 10px;
    }
    .progress-fill {
      height: 100%;
      background: #667eea;
      width: 0%;
      transition: width 0.3s;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🎨 图标自动生成工具</h1>
    <p style="color: #666; margin-bottom: 20px;">点击下方按钮，自动生成并下载所有必需的图标文件</p>
    
    <div class="icon-preview" id="preview"></div>
    
    <div class="status" id="status">
      <p>等待生成图标...</p>
    </div>

    <div class="progress" id="progress">
      <p>正在生成图标...</p>
      <div class="progress-bar">
        <div class="progress-fill" id="progress-fill"></div>
      </div>
    </div>

    <button onclick="generateAndDownload()" id="generate-btn">🚀 立即生成并下载图标</button>
    <button onclick="showInstructions()" id="help-btn">📖 查看详细说明</button>

    <div class="instructions" id="instructions" style="display: none;">
      <h3>📋 使用说明：</h3>
      <ol>
        <li>点击"立即生成并下载图标"按钮</li>
        <li>浏览器会自动下载三个图标文件：<code>icon16.png</code>、<code>icon48.png</code>、<code>icon128.png</code></li>
        <li>找到下载的文件（通常在"下载"文件夹中）</li>
        <li>将这三个文件复制到 <code>chrome-music-extension/icons/</code> 文件夹中</li>
        <li>如果 <code>icons</code> 文件夹不存在，请先创建它</li>
        <li>返回 Chrome 扩展页面，点击扩展的刷新按钮（🔄）重新加载扩展</li>
      </ol>
      <p style="margin-top: 15px; color: #c62828; font-weight: 600;">
        ⚠️ 重要：必须将图标文件放在正确的位置，扩展才能正常工作！
      </p>
    </div>
  </div>

  <script src="logo-generator.js"></script>
  <script>
    const icons = {};
    let generated = false;

    function showInstructions() {
      const instructions = document.getElementById('instructions');
      instructions.style.display = instructions.style.display === 'none' ? 'block' : 'none';
    }

    function updateProgress(percent) {
      const progress = document.getElementById('progress');
      const progressFill = document.getElementById('progress-fill');
      progress.classList.add('show');
      progressFill.style.width = percent + '%';
    }

    function updateStatus(message, type = '') {
      const status = document.getElementById('status');
      status.textContent = message;
      status.className = 'status ' + type;
    }

    function generateAndDownload() {
      const generateBtn = document.getElementById('generate-btn');
      generateBtn.disabled = true;
      updateProgress(0);
      generated = false; // 允许重新生成

      const sizes = [16, 48, 128];
      const preview = document.getElementById('preview');
      preview.innerHTML = '';

      sizes.forEach((size, index) => {
        setTimeout(() => {
          // 生成图标（每次都是随机的）
          const logoDataUrl = window.logoGenerator.generateLogo(size);
          icons[size] = logoDataUrl;

          // 显示预览
          const item = document.createElement('div');
          item.className = 'icon-item';
          
          const label = document.createElement('label');
          label.textContent = `${size}x${size}`;
          
          const canvas = document.createElement('canvas');
          canvas.width = size;
          canvas.height = size;
          canvas.style.width = size * 4 + 'px';
          canvas.style.height = size * 4 + 'px';
          canvas.style.imageRendering = 'auto';
          
          const img = new Image();
          img.onload = () => {
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, size, size);
          };
          img.src = logoDataUrl;
          
          item.appendChild(label);
          item.appendChild(canvas);
          preview.appendChild(item);

          // 下载图标
          setTimeout(() => {
            const link = document.createElement('a');
            link.download = `icon${size}.png`;
            link.href = logoDataUrl;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            updateProgress(((index + 1) / sizes.length) * 100);

            if (index === sizes.length - 1) {
              generated = true;
              generateBtn.disabled = false;
              generateBtn.textContent = '🔄 重新生成图标';
              updateStatus('✅ 所有图标已生成并下载！请将文件移动到 chrome-music-extension/icons/ 文件夹中', 'success');
              updateProgress(100);
              setTimeout(() => {
                document.getElementById('progress').classList.remove('show');
              }, 2000);
            }
          }, 300);
        }, index * 500);
      });
    }

    // 页面加载时自动生成预览
    window.addEventListener('load', () => {
      setTimeout(() => {
        const sizes = [16, 48, 128];
        const preview = document.getElementById('preview');
        
        sizes.forEach(size => {
          const logoDataUrl = window.logoGenerator.generateLogo(size);
          icons[size] = logoDataUrl;
          
          const item = document.createElement('div');
          item.className = 'icon-item';
          
          const label = document.createElement('label');
          label.textContent = `${size}x${size}`;
          
          const canvas = document.createElement('canvas');
          canvas.width = size;
          canvas.height = size;
          canvas.style.width = size * 4 + 'px';
          canvas.style.height = size * 4 + 'px';
          canvas.style.imageRendering = 'auto';
          
          const img = new Image();
          img.onload = () => {
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, size, size);
          };
          img.src = logoDataUrl;
          
          item.appendChild(label);
          item.appendChild(canvas);
          preview.appendChild(item);
        });
        
        updateStatus('✅ 图标预览已生成（每次刷新页面都会生成新的随机logo），点击按钮下载', 'success');
      }, 100);
    });
  </script>
</body>
</html>

